<template>
  <div class="my-account-safe">
    <div class="mt20 wrap clearfix">
      <div class="fl">账户安全&nbsp;&nbsp;</div>
      <div class="fl" style="width: 200px;">
         <Progress :percent="80"  status="success"/> 
      </div>
      <div class="fl">
        中&nbsp;
        <span class="f12 c3">
          完成账户设置可提高账户及资金安全
        </span>
      </div>
    </div>
    
    <div class="mt40">
      <span>已设置</span>
      <span class="c5"><Icon type="md-checkmark-circle" /></span>
      <span>登录密码</span>
      <a href="#" class="f12">修改</a>
      <p class="mt10 c3 f12">安全性高的密码可以使账户更安全，建议您定期更换密码</p>
    </div>
    
    <div class="mt40">
      <span>已设置</span>
      <span class="c5"><Icon type="md-checkmark-circle" /></span>
      <span>手机验证</span>
      <a href="#" class="f12">更换</a>
      <p class="mt10 c3 f12">验证后可通过手机找回密码，并接收相关的系统通知</p>
    </div>
    
    <div class="mt40">
      <span>未验证</span>
      <span class="c4"><Icon type="md-close-circle" /></span>
      <span>邮箱验证</span>
      <a href="#" class="f12">去验证</a>
      <p class="mt10 c3 f12">验证后可通过邮箱找回密码，并接收相关的系统通知</p>
    </div>
    
    <div class="mt40">
      <span>实名认证</span>
      <span class="c4"><Icon type="md-close-circle" /></span>
      <span>身份认证</span>
      <a href="#" class="f12">去认证</a>
      <p class="mt10 c3 f12">验证后可直接提现到银行卡账户</p>
    </div>
    
    
  </div>
</template>

<script>
  export default {
     mounted () {
      this.$store.commit('UPDATE_POSITION', this.position)
    },
    data () {
      return{
        position: [
          {title: '我的账户', link: '/admin/myAccount'},
          {title: '账户安全'}
        ],
        form:{
          sex: '1'
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .wrap{
    width: 600px;
  }
  .mt40{
    margin-top: 30px;
  }
  .my-account-safe{
    .mt40{
      border-top:1px solid #f2f3f4;
      padding-top: 30px;
    }
  }
</style>
